<template>
  <!-- 需求列表 -->
  <div class="app-container">
    <div class="head-container">
      <!-- 列表页上方按钮 -->
      <el-button
        slot="left"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="mainadd = true"
        >添加</el-button
      >
      <el-button
        slot="left"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="modifybtn()"
        >修改</el-button
      >
      <el-button
        slot="left"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="open(1)"
        >基于属性推荐</el-button
      >
      <el-button
        slot="left"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="recommendation2 = true"
        >基于内容推荐</el-button
      >
      <el-button
        slot="left"
        v-permission="['admin', 'storage:add']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="open(3)"
        >基于标签推荐</el-button
      >
    </div>
    <!-- 添加 -->
    <el-dialog :visible.sync="mainadd" width="620px">
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        size="small"
        label-width="100px"
      >
        <el-form-item label="需求编号">
          <el-input v-model="number" placeholder="提交后生成" disabled />
        </el-form-item>
        <el-form-item label="需求主题">
          <el-input v-model="theme" />
        </el-form-item>
        <el-form-item label="所属系统">
          <el-select
            v-model="systemName"
            style="width: 178px"
            placeholder="请选择"
            @change="selectsystem($event)"
          >
            <el-option
              v-for="item in syetems"
              :key="item.id"
              :value="item.systemName"
              :lable="item.systemName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划上线时间">
          <el-date-picker
            v-model="plandate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="描述" width="520px">
          <el-input v-model="textmain" type="textarea" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="status" style="width: 178px" placeholder="请选择">
            <el-option label="待计划" value="待计划" />
            <el-option label="案例编写中" value="案例编写中" />
            <el-option label="待评审测试报告" value="待评审测试报告" />
            <el-option label="待添加到投产清单" value="待添加到投产清单" />
            <el-option label="待验证" value="待验证" />
            <el-option label="已验证" value="已验证" />
            <el-option label="已投产" value="已投产" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="mainadd = false">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="add()"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog :visible.sync="modify" width="620px">
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        size="small"
        label-width="100px"
      >
        <el-form-item label="需求编号">
          <el-input v-model="number1" placeholder="提交后生成" disabled />
        </el-form-item>
        <el-form-item label="需求主题">
          <el-input v-model="theme1" />
        </el-form-item>
        <el-form-item label="所属系统">
          <el-select
            v-model="systemId1"
            style="width: 178px"
            placeholder="请选择"
            @change="selectsystem($event)"
          >
            <el-option
              v-for="item in syetems"
              :key="item.id"
              :label="item.systemName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划上线时间">
          <el-date-picker
            v-model="plandate1"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="描述" width="520px">
          <el-input v-model="textmain1" type="textarea" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="status1"
            style="width: 178px"
            placeholder="请选择"
          >
            <el-option label="待计划" value="待计划" />
            <el-option label="案例编写中" value="案例编写中" />
            <el-option label="待评审测试报告" value="待评审测试报告" />
            <el-option label="待添加到投产清单" value="待添加到投产清单" />
            <el-option label="待验证" value="待验证" />
            <el-option label="已验证" value="已验证" />
            <el-option label="已投产" value="已投产" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="mainadd = false">取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="modifyadd()"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 智能1弹出列表 -->
    <el-dialog title="智能推荐1" :visible.sync="recommendation1">
      <el-table :data="safety1">
        <el-table-column
          property="date"
          label="检查点"
          width="150"
          prop="point"
        />
        <el-table-column
          property="name"
          label="案列编号"
          width="200"
          prop="caseId"
        />
        <el-table-column
          property="name"
          label="案例名称"
          prop="caseName"
          width="200"
        />
        <el-table-column
          property="name"
          label="测试方法"
          width="200"
          prop="testMethod"
        />
        <el-table-column
          property="name"
          label="适用范围"
          width="200"
          prop="scope"
        />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="recommendation1 = false">取 消</el-button>
        <el-button type="primary" @click="recommendation1 = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 智能2弹出文本框 -->
    <el-dialog :visible.sync="recommendation2">
      <el-form :data="crud.data">
        <el-form-item label="请输入">
          <el-input v-model="inputtext" type="textarea" style="height: 60px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="recommendation2 = false">取 消</el-button>
        <el-button type="primary" @click="Generate">推荐</el-button>
      </div>
    </el-dialog>
    <!-- 智能2推荐列表 -->
    <el-dialog title="智能推荐2" :visible.sync="Generatebutton">
      <el-table :data="safety2">
        <el-table-column
          property="date"
          label="检查点"
          width="150"
          prop="point"
        />
        <el-table-column
          property="name"
          label="案列编号"
          width="200"
          prop="caseId"
        />
        <el-table-column
          property="name"
          label="案例名称"
          prop="caseName"
          width="200"
        />
        <el-table-column
          property="name"
          label="测试方法"
          width="200"
          prop="testMethod"
        />
        <el-table-column
          property="name"
          label="适用范围"
          width="200"
          prop="scope"
        />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Generatebutton = false">取 消</el-button>
        <el-button type="primary" @click="Generatebutton = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 智能3弹出列表 -->
    <el-dialog title="智能推荐3" :visible.sync="recommendation3">
      <el-table :data="safety3">
        <el-table-column
          property="date"
          label="检查点"
          width="150"
          prop="point"
        />
        <el-table-column
          property="name"
          label="案列编号"
          width="200"
          prop="caseId"
        />
        <el-table-column
          property="name"
          label="案例名称"
          prop="caseName"
          width="200"
        />
        <el-table-column
          property="name"
          label="测试方法"
          width="200"
          prop="testMethod"
        />
        <el-table-column
          property="name"
          label="适用范围"
          width="200"
          prop="scope"
        />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="recommendation3 = false">取 消</el-button>
        <el-button type="primary" @click="recommendation3 = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 列表页展示 -->
    <el-table
      ref="table"
      :data="crud.data"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="requirementId"
        label="需求编号"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="requirementTheme"
        label="需求主题"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="system.systemName"
        label="所属系统"
      />
      <el-table-column prop="requirementDesc" label="需求描述" />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="status"
        width="100"
        label="状态"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="planDate"
        width="100"
        label="计划上线时间"
      />
      <!--分页组件-->
    </el-table>
    <pagination />
  </div>
</template>
<script>
import getsafeRequirement from "@/api/system/main";
console.log(getsafeRequirement);
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import pagination from "@crud/Pagination";
import Treeselect from "@riophae/vue-treeselect";
import DateRangePicker from "@/components/DateRangePicker";
import { mapGetters } from "vuex";
export default {
  name: "User",
  components: {
    Treeselect,
    DateRangePicker,
    pagination,
  },
  cruds() {
    return CRUD({
      title: "安全",
      url: "api/safeRequirement/query",
      //   params: {
      //     docType: "0",
      //   },
      crudMethod: { ...getsafeRequirement },
    });
  },
  mixins: [presenter(), header(), form(), crud()],
  data() {
    return {
      demainid: "", //id
      demand: [], //选中修改的数据
      modify: false, //修改
      theme: "", // 需求主题
      number: "", // 需求编号
      textmain: "", // 需求描述
      plandate: "", // 计划上线时间
      syetems: [], // 所属系统
      status: "", // 状态
      theme1: "", // 需求主题(修改)
      number1: "", // 需求编号(修改)
      textmain1: "", // 需求描述(修改)
      plandate1: "", // 计划上线时间(修改)
      syetems1: [], // 所属系统(修改)
      status1: "", // 状态(修改)
      safety1: "", // 智能1列表
      safety2: "", // 智能2列表
      safety3: "", // 智能3列表
      inputtext: "", // 录入文本
      mainadd: false, // 添加
      Generatebutton: false, // 系统规则数据
      recommendation1: false, // 智能1
      recommendation2: false, // 智能2
      recommendation3: false, // 智能3
      systemId1: "",
      systemName: "",
      systemName1: "",
      idList: "",
    };
  },
  computed: {
    ...mapGetters(["user", "documentApi"]),
  },
  mounted() {
    console.log(this.systemName);
    this.systemselection();
  },
  methods: {
    // 智能选择13
    open(val) {
      let data = {};
      if (val === 1) {
        this.recommendation1 = true;
        data = {
          recommendType: "0",
          requirementId: this.idList.substring(1, this.idList.length),
        };
      }
      if (val === 3) {
        this.recommendation3 = true;
        data = {
          recommendType: "2",
          requirementId: this.idList.substring(1, this.idList.length),
        };
      }
      getsafeRequirement
        .getoneType(data)
        .then((res) => {
          console.log(res.content);
          this.safety1 = res.content;
          this.safety2 = res.content;
          this.safety3 = res.content;
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
    },
    // 多选
    handleSelectionChange(data) {
      this.idList = "";
      for (var i = 0; i < data.length; i++) {
        this.idList = this.idList + "," + data[i].id;
      }
      console.log(data);
      this.demand = data;
      console.log(this.demand);
    },
    // 推荐按钮
    Generate() {
      this.Generatebutton = true;
      getsafeRequirement
        .getoneType({
          recommendType: "1",
          inputText: this.inputtext,
          // todo  应该是需要传参的
        })
        .then((res) => {
          console.log(res.content);
          this.safety2 = res.content;
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
    },
    // 所属系统列表(调需求列表接口)
    systemselection() {
      getsafeRequirement
        .getsafeSystem({
          // todo  应该是需要传参的
        })
        .then((res) => {
          console.log(res);
          this.syetems = res;
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
    },
    // 新增需求接口
    add() {
      var a = this.systemName;
      var listid = "";
      console.log(this.key);
      // 获取当前选中所属系统id
      this.syetems.filter(function (collection, predicate) {
        console.log(collection, predicate);
        console.log(collection.systemName);
        var b = collection.systemName;
        if (a == b) {
          console.log(collection.id);
          listid = collection.id;
        } else {
          console.log("没有id");
        }
      });
      debugger;
      const systemId = listid;
      const resources = {
        planDate: this.plandate,
        requirementId: 0,
        requirementDesc: this.textmain,
        requirementTheme: this.theme,
        status: this.status,
        system: {},
      };
      console.log(resources);
      getsafeRequirement
        .postadd(resources, systemId)
        .then((res) => {
          console.log(res);
          this.mainadd = false;
          parent.location.reload();
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
      this.mainadd = false;
    },
    //修改反显
    modifybtn(data) {
      this.modify = true;
      data = this.demand;
      // theme1: "", // 需求主题(修改)
      // number1: "", // 需求编号(修改)
      // textmain1: "", // 需求描述(修改)
      // plandate1: "", // 计划上线时间(修改)
      // syetems1: [], // 所属系统(修改)
      // status1: "", // 状态(修改)
      this.theme1 = data[0].requirementTheme;
      this.number1 = data[0].system.systemId;
      this.textmain1 = data[0].requirementDesc;
      this.plandate1 = data[0].planDate;
      this.systemId1 = data[0].system.id;
      this.systemName1 = data[0].system.systemName;
      this.status1 = data[0].status;
      this.demainid = data[0].id;
      console.log(data);
    },
    //修改接口
    modifyadd() {
      const resources = {
        id: this.demainid,
        requirementId: this.number1,
        requirementTheme: this.theme1,
        planDate: this.plandate1,
        system: {
          // 这里不能上送this.systems1.id,需要上送选中的那个system的id,你改一下
          id: this.systemId1,
        },
        requirementDesc: this.textmain1,
        status: this.status1,
      };
      // todo  应该是需要传参的
      getsafeRequirement
        .putsafe(resources)
        .then((res) => {
          console.log(res);

          this.syetems = res;
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
      parent.location.reload();
    },
    selectsystem(event) {
      console.log(event);
    },
  },
};
</script>
